/*
* @Author: Yejing
* @Date: 2023-06-14 16:37:39
* @LastEditors: Yejing
* @LastEditTime: 2023-06-26 17:35:53
* @Description: 任务大厅
*/
<template>
    <view class="task-hall-page">
        <c-layout>
            <c-navigation-bar :title="$t('anchorConsole.LiveTaskHall')" slot="head"></c-navigation-bar>
            <!--搜索-->
						<view slot="head" class="search">
							<u-input maxlength="12" type="text" v-model="input.value" :clearable="false"
								:placeholder="input.placeholder">
							</u-input>
							<view class="input-search-button">
								<u-icon name="search" size="40" color="#fff" @click="searchEvent"></u-icon>
							</view>
						</view>
            <view class="filtra" >
                <uni-data-select
												style="width: 200px;"
                        v-model="filtra.type"
                        :localdata="filtra.typeData"
                       :placeholder="$t('anchorConsole.ProductTypes')"
                        @change="select('type',filtra.type)"

                ></uni-data-select>
    
                <uni-data-select
                        v-model="filtra.grade"
                        :localdata="filtra.gradeData"
                       :placeholder="$t('anchorConsole.ShopClass')"
                        @change="select('grade',filtra.grade)"
                ></uni-data-select>
            </view>
            <!--任务卡片-->
            <view class="container-box">
                <view v-for="item in taskList" :key="item.id">
                    <taskCard :task="item" :followUrlData="followUrlData"></taskCard>
                </view>
            </view>
        </c-layout>
    </view>
</template>

<script>
export default {
    data() {
        return {
					input: {
						value: '',
						placeholder: this.$t('home.placeholder')
					},
            filtra: {
                type: '',
                time: '',
                grade: '',
                typeData: [],
                timeData: [],
                gradeData: []
            },
            taskList: [],
            followUrlData: {},
            postTaskHallObj: {
                pageSize: 20,
                pageNum: 1,
            },
        };
    },
	onReady() {
		//阻止右滑返回
		// #ifdef APP-PLUS
		plus.webview.currentWebview().setStyle({ popGesture: 'none' });
		// #endif 
		
	
	},
    onLoad(val) {
        this.followUrlData = val
        //获取任务大厅数据
        this.gettaskHallData(this.postTaskHallObj)
        //获取店铺等级
        this.getGrade()
				//获取商品类型
        this.getcategory()

    },
    methods: {
			searchEvent(){
				this.postTaskHallObj.name = this.input.value
				this.gettaskHallData(this.postTaskHallObj) 
			},
			
        //获取任务大厅数据
        gettaskHallData(postTaskHallObj) {
            this.$u.post('/app/anchor/sell/task/taskHallPage', postTaskHallObj).then(res => {
                this.taskList = res.data.records
            })
        },
        //选择筛选
        select(e, val) {
            console.log(e, val)
            if (e == 'grade') {
                this.postTaskHallObj.shopLevelId = val
                this.gettaskHallData(this.postTaskHallObj)
								//获取店铺等级
								this.getGrade()
            }
						if(e='type'){
							this.postTaskHallObj.categoryId  = val
							this.gettaskHallData(this.postTaskHallObj)
							//获取店铺等级
							this.getcategory()
						}
        },
        //获取店铺等级
        getGrade() {
            this.$u.get('/app/anchor/sell/task/all').then(res => {
                this.filtra.gradeData = res.data.map(item => ({...item, text: item.name, value: item.id}))
              
            })
        },
				//获取商品类型
        getcategory() {
            this.$u.get('/app/shopGoodsInfo/categoryAll').then(res => {
                this.filtra.typeData = res.data.map(item => ({...item, text: item.name, value: item.id}))
              
            })
        }
    }

}
</script>

<style lang="scss" scoped>
.task-hall-page {
	/deep/ .container-box{
		padding: 30px 15px 0px 15px;
		    overflow: scroll;
		    height: 72vh;
	}
	.search {
		height: 110rpx;
		border-radius: 24rpx;
		backdrop-filter: blur(10px);
		display: flex;
		align-items: center;
		padding: 0 18rpx;
		margin: 16px 16px 16px 16px;
		background: rgb(246, 247, 251);
	
		.input-search-button {
			width: 76rpx;
			height: 76rpx;
			background: #2934D0;
			border-radius: 20rpx;
			text-align: center;
			line-height: 85rpx;
		}
	}
  .filtra {
    display: flex;
    justify-content: space-between;
    width: 80%;
    margin: 0 auto 40rpx;
    padding-top: 20rpx;

    /deep/ .uni-stat__select {
      margin-right: 20rpx;

      .uni-select {
        border: 0 !important;
        background: #F5F6F8;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
      }
    }
  }
}

</style>
